<template>
    <div style="height: 100%" class="warp-2 body-content">
        <navbar :title="$t('mall_31')"></navbar>
        <div class="content-noBottom">
            <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                <van-list
                v-model="isLoading"
                :finished="finished"
                :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                loding-text="loading"
                @load="getMallList"
                >
                    <div class="record-body">
                        <div class="record-list">
                            <div class="mall-item" v-for="item in list" :key="item.ielId" @click="showMsgBox(item)">
                                <div class="mall-info">
                                    <div class="mall-title">{{ item.impName }}</div>
                                    <div class="mall-status"><span @click.stop="confirmMall(item)" :class="item.ielDeliver | statusClassHandle">{{ statusTextHandle(item.ielDeliver) }}</span></div>
                                </div>
                                <div class="mall-more">
                                    <div class="mall-credit">
                                        <span>{{ $t('mall_32') }}: </span>
                                        <span>{{ item.ielExchange }}</span>
                                    </div>
                                    <div class="mall-date">
                                        <span>{{ $t('mall_33') }}: </span>
                                        <span>{{ item.ielCreatetime }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-if="list.length === 0" style="height: calc(100vh - 76px)">
                            <div class="box-table" style="width:100%;height:100%;">
                                <div class="box-table-cell" style="text-align: center;">
                                    <div class="no-data">
                                        <img src="../../../static/images/no-data.png" alt=""/>
                                        <p class="color999">{{ $t("no_data") }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
        <common-loading :isLoading="isLoading"></common-loading>
    </div>
</template>

<script>
// import { PullRefresh } from 'vant';
import { Dialog } from 'vant';
export default {
    name: 'ConvertibleRecord',
    components: {
        vanDialog: Dialog
    },
    data() {
        return {
            total: 0,
            pageNo: 0,
            list: [],
            isLoading: false,
            finished: false,
            isRefresh: false
        };
    },
    filters: {
        statusClassHandle(value) {
            switch (value) {
            case 1 :
                return 'status-1';
            case 2:
                return 'status-2';
            case 3:
                return 'status-3';
            default:
                return 'status-1';
            }
        }
    },
    methods: {
        confirmMall(data) {
            if (data.ielDeliver === 2) {
                Dialog.confirm({
                    message: this.$t('mall_40')
                }).then(res => {
                    this.isLoading = true;
                    this.$axios.post(`/app/api/trainee/my/exchange/status?ielId=${data.ielId}`).then(res => {
                        data.ielDeliver = 3;
                        Dialog.alert({
                            message: this.$t('mall_41'),
                            confirmButtonText: this.$t('mall_10'),
                            confirmButtonColor: '#075ebb'
                        });
                        this.isLoading = false;
                    }).catch(res => {
                        this.isLoading = false;
                    });
                });
            }
        },
        statusTextHandle(value) {
            switch (value) {
            case 1 :
                return this.$t('mall_34');
            case 2:
                return this.$t('mall_35');
            case 3:
                return this.$t('mall_36');
            default:
                return this.$t('mall_34');
            }
        },
        showMsgBox(data) {
            let content = this.$t('mall_37', {'value1': data.ielConsignee, 'value2': data.ielLinktel, 'value3': data.ielAddress});
            Dialog.alert({
                message: content,
                confirmButtonText: this.$t('mall_10'),
                confirmButtonColor: '#075ebb'
            });
        },
        getMallList(option) {
            this.$axios.get(`/app/api/trainee/my/credits/exchange-log/list?pageNo=${this.pageNo}`).then(res => {
                if (res.data.results && res.data.results.length !== 0) {
                    if (option && option === 'refresh') {
                        this.list = res.data.results;
                    } else {
                        this.list = [...this.list, ...res.data.results];
                    }
                }
                this.total = res.data.totalRecord;
                this.isLoading = false;
                this.pageNo++;
                if (this.list.length >= this.total) {
                    this.finished = true;
                }
            });
        },
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.getMallList('refresh');
                this.isRefresh = false;
            }, 900);
        }
    },
    created() {
        this.onPulldownTop();
    }
};
</script>

<style scoped lang="less">
    .record-body {
        .record-list {
            background: #fff;
            padding: 0 10px;
            .mall-item {
                &:not(:last-child) {
                    border-bottom: 1px solid #F8F8F8;
                }
                .mall-info {
                    padding: 10px 0 5px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    min-width: 0;
                    .mall-title {
                        flex: 1;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    .mall-status {
                        // width: 70px;
                        text-align: right;
                        font-size: 12px;
                        &>span {
                            padding: 5px 10px;
                            border-radius: 20px;
                        }
                        .status-1 {
                            color: #797979;
                            border: 1px solid #797979;
                        }
                        .status-2 {
                            color: darkorange;
                            border: 1px solid darkorange;
                        }
                        .status-3 {
                            color: #9F9F9F;
                            border: 1px solid #9F9F9F;;
                        }
                    }
                }
                .mall-more {
                    padding: 5px 0 10px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .mall-credit {
                        font-size: 12px;
                        &>span:first-child {
                            color: #9F9F9F;
                        }
                        &>span:last-child {
                            color: #797979;
                        }
                    }
                    .mall-date {
                        font-size: 12px;
                        &>span:first-child {
                            color: #9F9F9F;
                        }
                        &>span:last-child {
                            color: #797979;
                        }
                    }
                }
            }
        }
    }
</style>
